<template>
  <section class="mui-content pd">
    <mh-header headName="红娘等级"> </mh-header>
    <div class="level-head mh-pd bg-w flex">
      <div class="le-lt">
        <div class="pic-box">
          <img :src="hnInfo.pic" alt="头像">
        </div>
      </div>

      <div class="hn-info">
        <p class="hn-name" v-text="hnInfo.name">用户名</p>
        <span class="label-level" v-text="hnInfo.level">铜牌红娘</span>
      </div>

      <div class="num-item">
        <h5 v-text="hnInfo.memberNum">0</h5>
        <p>会员人数</p>
      </div>

      <div class="num-item">
        <h5 v-text="hnInfo.activeNum">0</h5>
        <p>当月活动</p>
      </div>

      <div class="num-item">
        <h5 v-text="hnInfo.income">0</h5>
        <p>累积收入</p>
      </div>

    </div>

    <ul class="notes mh-pd bg-w">
      <li class="note-item">
        <h4>入门红娘</h4>
        <p>入门红娘 为新加入小于3个月，下线少于100人，收入少于4000，开展活动每月少于4次</p>
      </li>
      <li class="note-item">
        <h4>铜牌红娘</h4>
        <p>铜牌红娘 为加入小于6个月，下线少于300人，收入少于6000，开展活动每月少于6次</p>
      </li>
      <li class="note-item">
        <h4>银牌红娘</h4>
        <p>银牌红娘 为加入小于12个月，下线少于100人，收入少于8000，开展活动每月少于4次</p>
      </li>
      <li class="note-item">
        <h4>金牌红娘</h4>
        <p>金牌红娘 为加入小于18个月，下线少于100人，收入少于12000，开展活动每月少于4次</p>
      </li>
    </ul>
  </section>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  export default {
    name: "mind-match",
    data () {
      return {
        hnInfo: {
          pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=766585699,506578438&fm=26&gp=0.jpg',
          name: '杜伊无二',
          level: '铜牌红娘',
          memberNum: 20,
          activeNum: 6,
          income: 2090
        }
      }
    },
    components: {
      MhHeader
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .pic-box {
    @include mh-avatar-box(6rem,6rem)
  }
  .hn-info {
    margin-left: .5rem;
    margin-right: .5rem;
  }
  .hn-name {
    margin-bottom: .4rem;
    @include sc(1.5rem, #333);
  }
  .label-level {
    padding: .05rem .4rem;
    background: linear-gradient(180deg, #6a3906 0%, #b28850 100%);
    border-radius: .25rem;
    color: #fff;
    font-size: 1rem;
  }
  .num-item {
    margin-right: 1.5rem;
    text-align: center;
    &>h5 {@include sc(1.8rem, #e685aa);}
    &>p {@include sc(1.2rem, #999);}
  }
  .note-item {
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
    h4 {
      margin-bottom: .4rem;
      @include sc(1.5rem, #333);
      font-weight: bold;
    }
    p {@include sc(1.4rem, #666);}
  }
</style>
